function Man(){
  this.init();
  this.addListener();
}

Man.ManTemplate = `
<div class="container col-md-12">
<table class="table table-striped table-position">
<thead>
  <button type="button" class="btn btn-default">搜索</button>&nbsp;
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal">增加</button>&nbsp;

   <div class="col-xs-2">
  <input type="text" class="form-control" placeholder="">
</div>
</thead>
<tbody>
  <tr>
    <td><input type="checkbox"></td>
    <td>工号</td>
    <td>员工姓名</td>
    <td>性别</td>
    <td>员工职位</td>
    <td>手机</td>
    <td>所属部门</td>
    <td>入职时间</td>
    <td>状态</td>
    <td>操作</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>1001</td>
    <td>吴菲菲</td>
    <td>男</td>
    <td>经理</td>
    <td>15520675884</td>
    <td>软装部</td>
    <td>2010-5-1</td>
    <td>在职</td>
    <td><a href=""  data-toggle="modal" data-target="#xgModal">编辑</a>&nbsp;<a href=""  data-toggle="modal" data-target="#ckModal">查看</a>&nbsp;<a href="">删除</a></td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>1001</td>
    <td>吴菲菲</td>
    <td>男</td>
    <td>经理</td>
    <td>15520675884</td>
    <td>软装部</td>
    <td>2010-5-1</td>
    <td>在职</td>
    <td><a href="">编辑</a>&nbsp;<a href="">查看</a>&nbsp;<a href="">删除</a></td>
  </tr>
  
</tbody>
</table>
<!-- addModal -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title" id="myModalLabel">添加新员工信息</h4>
    </div>
    <div class="modal-body">
      <div class="alert alert-danger hidden add-pos-error">添加职位有误</div>
      <form class="form-add-pos">
<div class="form-group">
  <label for="exampleInputEmail1">工号</label>
  <input type="text" class="form-control" name="id" id="exampleInputEmail1" placeholder="">
</div>
<div class="form-group">
  <label for="exampleInputPassword1">员工姓名</label>
  <input type="text" class="form-control" name="names"  placeholder="">
</div>
<div class="form-group">
  <label for="exampleInputPassword1">性别</label>
  <input type="text" class="form-control" name="sex"  placeholder="">
</div>
  <div class="form-group">
  <label for="exampleInputPassword1">员工职位</label>
  <input type="text" class="form-control" name="position"  placeholder="">
</div>
  <div class="form-group">
  <label for="exampleInputPassword1">手机</label>
  <input type="text" class="form-control" name="phone"  placeholder="">
</div>
  <div class="form-group">
  <label for="exampleInputPassword1">所属部门</label>
  <input type="text" class="form-control" name="partment"  placeholder="">
</div>
<div class="form-group">
  <label for="exampleInputPassword1">入职时间</label>
  <input type="text" class="form-control" name="time"  placeholder="">
</div>
  <div class="form-group">
  <label for="exampleInputPassword1">状态</label>
  <input type="text" class="form-control" name="status"  placeholder="">
</div>
</form>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      <button type="button" class="btn btn-primary btn-add">添加</button>
    </div>
  </div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="xgModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title" id="myModalLabel">修改员工信息</h4>
    </div>
    <div class="modal-body">
      <form>
<div class="form-group">
  <label for="exampleInputEmail1">工号</label>
  <input type="text" class="form-control" id="exampleInputEmail1" placeholder="">
</div>
<div class="form-group">
  <label for="exampleInputPassword1">员工姓名</label>
  <input type="text" class="form-control"  placeholder="">
</div>
<div class="form-group">
  <label for="exampleInputPassword1">性别</label>
  <input type="text" class="form-control"  placeholder="">
</div>
  <div class="form-group">
  <label for="exampleInputPassword1">员工职位</label>
  <input type="text" class="form-control"  placeholder="">
</div>
  <div class="form-group">
  <label for="exampleInputPassword1">手机</label>
  <input type="text" class="form-control"  placeholder="">
</div>
  <div class="form-group">
  <label for="exampleInputPassword1">所属部门</label>
  <input type="text" class="form-control"  placeholder="">
</div>
  <div class="form-group">
  <label for="exampleInputPassword1">状态</label>
  <input type="text" class="form-control"  placeholder="">
</div>
</form>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      <button type="button" class="btn btn-primary">修改</button>
    </div>
  </div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="ckModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title" id="myModalLabel">查看员工信息</h4>
    </div>
    <div class="modal-body">
      <form>
<div class="form-group">
  <label for="exampleInputEmail1">工号</label>
  <input type="text" class="form-control" id="exampleInputEmail1" placeholder="">
</div>
<div class="form-group">
  <label for="exampleInputPassword1">员工姓名</label>
  <input type="text" class="form-control"  placeholder="">
</div>
<div class="form-group">
  <label for="exampleInputPassword1">性别</label>
  <input type="text" class="form-control"  placeholder="">
</div>
  <div class="form-group">
  <label for="exampleInputPassword1">员工职位</label>
  <input type="text" class="form-control"  placeholder="">
</div>
  <div class="form-group">
  <label for="exampleInputPassword1">手机</label>
  <input type="text" class="form-control"  placeholder="">
</div>
  <div class="form-group">
  <label for="exampleInputPassword1">所属部门</label>
  <input type="text" class="form-control"  placeholder="">
</div>
  <div class="form-group">
  <label for="exampleInputPassword1">状态</label>
  <input type="text" class="form-control"  placeholder="">
</div>
</form>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">确认</button>
    </div>
  </div>
</div>
</div>
</div>`;

Man.ManRowTemplate=`
<tr>
      <td><input type="checkbox"></td>
      <td><%= id %></td>
      <td><%= names %></td>
      <td><%= sex %></td>
      <td><%= position %></td>
      <td><%= phone %></td>
      <td><%= partment %></td>
      <td><%= time %></td>
      <td><%= status %></td>
      <td><a href=""  data-toggle="modal" data-target="#xgModal">编辑</a>&nbsp;<a href=""  data-toggle="modal" data-target="#ckModal">查看</a>&nbsp;<a href="">删除</a></td>
</tr>
`;
// 
$.extend(Man.prototype,{
  init(){
    
  },
  addListener(){
    $(".man-btn").on("click",$.proxy(this.createDom,this));
   
  },
  createDom(){
      $("#content").html(Man.ManTemplate);
      $(".btn-add").click(this.addPosHandler);
      console.log("bbb");
  },
  //添加信息
  addPosHandler() {
    // 获取表单中的数据
    // URL
    const url = "/position/add";
    // 向服务器发送的数据
    // const data = new FormData($(".form-add-pos").get(0));
    // // 发送请求
    // console.log(data);
    // $.ajax({
    //   type: "post",
    //   url: url,
    //   data: data,
    //   dataType: "json",
    //   processData: false, // 不将 data 数据转换为查询字符串
    //   contentType: false, // 不使用默认的 "application/x-www-form-urlencoded"
    //   success: function(data) {
    //     if (data.res_body.status === 1) { // 添加成功，使用 ejs 浏览器端模板渲染
    //       // data.res_body.data
    //       // 使用 ejs 模板渲染
    //       const html = ejs.render(Man.ManRowTemplate, data.res_body.data)
    //       // 显示
    //       $(".table-position tbody").append(html);
    //       // 关闭模态框
    //       $("#addPosModal").modal("hide");
    //     } else { // 添加失败
    //       $(".add-pos-error").removeClass("hidden");
    //     }
    //   }
    // })
    const data = $(".form-add-pos").serialize();
  // 请求API接口，实现职位添加
  $.post(url, data, (data)=>{
    if (data.res_body.status === 1) { // 添加成功，使用 ejs 浏览器端模板渲染
      // data.res_body.data
      // 使用 ejs 模板渲染
      const html = ejs.render(Man.ManRowTemplate, data.res_body.data)
      // 显示
      $(".table-position tbody").append(html);
      // 关闭模态框
      $("#addModal").modal("hide");
      $(".modal-backdrop").remove();
    } else { // 添加失败
      $(".add-pos-error").removeClass("hidden");
    }
  }, "json")
   },
});
new Man();
